<template>
    <div class="data-detail" v-loading="loading">
        <div class="table-box">
            <el-table
                @select="tableSelect"
                @select-all="tableSelect"
                :data="tableData"
                border
                style="width: 100%">
                <el-table-column
                    :selectable="isCanSelect"
                    type="selection"
                    width="55">
                </el-table-column>
                <el-table-column
                    label="游戏信息"
                    width="200">
                    <template slot-scope="scope">
                        <div class="msg-box">
                            <div>
                                <div class="msg-icon">
                                    <img :src="scope.row.selectGameInfoVo.gameIcon" alt="">
                                </div>
                            </div>
                            <div>
                                <span class="msg-title">游戏名称:</span>
                                <span class="msg-desc">{{scope.row.selectGameInfoVo.gameName || '/'}}</span>
                            </div>
                            <div>
                                <span class="msg-title">游戏apk:</span>
                                <span class="msg-desc">{{scope.row.selectGameInfoVo.apk || '/'}}</span>
                            </div>
                            <div>
                                <span class="msg-title">游戏副标题:</span>
                                <span class="msg-desc">{{scope.row.selectGameInfoVo.gameTitle || '/'}}</span>
                            </div>
                            <div>
                                <span class="msg-title">游戏类型:</span>
                                <span class="msg-desc">{{scope.row.selectGameInfoVo.gameCategory || '/'}}</span>
                            </div>
                            <div>
                                <span class="msg-title">游戏tag:</span>
                                <span class="msg-desc" v-if="scope.row.selectGameInfoVo.label && scope.row.selectGameInfoVo.label.length">
                                    <span v-for="(item, index) in scope.row.selectGameInfoVo.label" :key="index">{{item}} </span>
                                </span>
                                <span class="msg-desc" v-else>/</span>
                            </div>
                            <div>
                                <span class="msg-title">游戏简介:</span>
                                <span class="msg-desc">{{scope.row.selectGameInfoVo.gameIntroduce || '/'}}</span>
                            </div>
                            <div>
                                <span class="msg-title">游戏大小:</span>
                                <span class="msg-desc">{{scope.row.selectGameInfoVo.gameLength || '/'}}</span>
                            </div>
                            <div>
                                <span class="msg-title">游戏厂商:</span>
                                <span class="msg-desc" v-if="scope.row.selectGameInfoVo.gameFirm && scope.row.selectGameInfoVo.gameFirm.length">
                                    <span v-for="(item, index) in scope.row.selectGameInfoVo.gameFirm" :key="index">{{item}} </span>
                                </span>
                                <span class="msg-desc" v-else>/</span>
                            </div>
                            <div>
                                <span class="msg-title">游戏资费:</span>
                                <span class="msg-desc">{{scope.row.selectGameInfoVo.gameCharges || '/'}}</span>
                            </div>
                            <div>
                                <span class="msg-title">应用分级:</span>
                                <span class="msg-desc">{{scope.row.selectGameInfoVo.applyRating || '/'}}</span>
                            </div>
                            <div>
                                <span class="msg-title">游戏评分:</span>
                                <span class="msg-desc">{{scope.row.selectGameInfoVo.gameScore || '/'}}</span>
                            </div>
                            <div>
                                <span class="msg-title">语言:</span>
                                <span class="msg-desc" v-if="scope.row.selectGameInfoVo.gameLanguage && scope.row.selectGameInfoVo.gameLanguage.length">
                                    <span v-for="(item, index) in scope.row.selectGameInfoVo.gameLanguage" :key="index">{{item}} </span>
                                </span>
                                <span class="msg-desc" v-else>/</span>
                            </div>
                            <div>
                                <span class="msg-title">更新时间:</span>
                                <span class="msg-desc">{{scope.row.selectGameInfoVo.updateTime || '/'}}</span>
                            </div>
                            <div>
                                <span class="msg-title">系统需求:</span>
                                <span class="msg-desc">{{scope.row.selectGameInfoVo.systemRequire || '/'}}</span>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="name"
                    label="视频"
                    width="180">
                    <template slot-scope="scope">
                        <div class="video-box" v-for="(item, index) in scope.row.videoList" :key="index">
                            <videoBox v-if="index <= 3" :url="item.videoUrl" :time="item.videoDuration" :img="item.videoCover"/>
                        </div>
                        <div class="watch-more" v-if="scope.row.videoList.length > 4"><span @click="showVideo(scope.row)">共{{scope.row.videoList.length}}条，查看更多</span></div>
                    </template>
                </el-table-column>
                <el-table-column
                    label="图片"
                    width="180">
                    <template slot-scope="scope">
                        <template v-if="scope.row.gameImageList && scope.row.gameImageList.length">
                            <div v-for="(item, index) in scope.row.gameImageList" :key="index">
                                <div class="img-box" v-if="index <= 3" @click="showImgList(scope.row, index)">
                                    <img :src="item.imageUrl" alt="">
                                    <div class="px-box" v-if="item.width && item.height">{{item.width}}x{{item.height}}</div>
                                </div>
                            </div>
                            <div class="watch-more" v-if="scope.row.gameImageList.length > 4"><span @click="showImg(scope.row)">共{{scope.row.gameImageList.length}}条，查看更多</span></div>
                        </template>
                        <template v-else>
                            <div>暂无图片</div>
                        </template>
                    </template>
                </el-table-column>
                <el-table-column
                    label="状态">
                    <template slot-scope="scope">
                        <div style="color: #F56C6C;" v-if="scope.row.status === 2">已暂停</div>
                        <div style="color:#67C23A;" v-else-if="scope.row.status === 1">已完成</div>
                        <div v-else>导入中</div>
                    </template>
                </el-table-column>
                <el-table-column
                    label="操作">
                    <template slot-scope="scope">
                        <div v-if="scope.row.status !== 1"><el-button @click="stopTask(scope.row.selectGameInfoVo.gameId, scope.row)" type="text" size="small">暂停</el-button></div>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <div class="btn-box">
            <el-button type="primary" :disabled="selectList.length === 0" style="width:500px;" size="small" @click="stopTask(0)">暂停{{selectList.length}}条</el-button>
        </div>

        <el-dialog
            title="查看视频"
            width="900px"
            :visible.sync="showAllVideo">
            <div class="video-list-box">
                <div class="video-box" v-if="currentItem.videoList && currentItem.videoList.length">
                    <div class="video-items" v-for="(item, index) in currentItem.videoList" :key="index">
                        <videoBox :url="item.videoUrl" :time="item.videoDuration" :img="item.videoCover"/>
                        <div class="video-title">
                            <span class="title-official" v-if="item.official">官方</span>
                            <span class="title-user" v-else>用户</span>
                            <span>{{item.videoTitle}}</span>
                        </div>
                    </div>
                </div>
                <div v-else>暂无视频</div>
            </div>
        </el-dialog>

        <el-dialog
            title="查看图片"
            class="img-list-box"
            width="900px"
            :visible.sync="showAllImg">
                <div class="dialog-img-box">
                    <div class="img-item" v-for="(item, index) in currentItem.gameImageList" :key="index">
                        <div class="show-box">
                            <img :src="item.url" alt="" class="img">
                        </div>
                    </div>
                </div>
        </el-dialog>

        <div class="img-list-dialog" v-if="imgListDialog" @click="imgListDialog = false">
            <img :src="currentImg" alt="">
            <div class="left" v-if="currentIndex !== 0" @click.stop="imgListGoLeft">
                <i class="el-icon-arrow-left"></i>
            </div>
            <div class="right" v-if="currentIndex < currentItem.gameImageList.length -1" @click.stop="imgListGoRight">
                <i class="el-icon-arrow-right"></i>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data () {
        return {
            tableData: [],
            loading: false,
            showAllVideo: false,
            showAllImg: false,
            selectList: [],
            imgListDialog: false,
            currentIndex: 0,
            currentItem: {
                gameImageList: []
            }
        }
    },

    created () {
        this.getList()
    },

    methods: {
        // 获取列表
        async getList () {
            if (this.loading) return
            this.loading = true
            let params = {
                taskId: this.$route.query.id
            }
            let res = await this.$http.get('/spider/getTaskDeetail', { params })
            if (res.code === '0') {
                this.tableData = res.data
            } else {
                this.$message({
                    type: 'error',
                    message: '系统异常，请稍后再试'
                })
            }
            this.loading = false
        },

        // 是否可以选择
        isCanSelect (row, index) {
            return row.status !== 1
        },

        // 暂停导入
        async stopTask (id, item) {
            let gameIds
            if (id) {
                gameIds = id
            } else {
                let arr = []
                this.selectList.forEach(item => {
                    arr.push(item.selectGameInfoVo.gameId)
                })
                gameIds = arr.join()
            }
            let res = await this.$http.get('/spider/taskStop', {
                params: {
                    gameIds: gameIds
                }
            })
            if (res.code === '0') {
                if (id) {
                    item.status = 2
                } else {
                    this.selectList.forEach(item => {
                        item.status = 2
                    })
                    this.selectList = []
                }
                this.$message({
                    type: 'success',
                    message: '暂停成功！'
                })
            } else {
                this.$message({
                    type: 'error',
                    message: res.desc
                })
            }
        },

        showVideo (item) {
            this.currentItem = item
            this.showAllVideo = true
        },

        showImg (item) {
            this.showAllImg = true
        },

        showImgList (item, index) {
            this.currentItem = item
            this.currentIndex = index
            this.imgListDialog = true
        },

        imgListGoRight () {
            this.currentIndex++
        },

        imgListGoLeft () {
            this.currentIndex--
        },

        tableSelect (select) {
            this.selectList = select
        }
    },

    computed: {
        currentImg () {
            return this.currentItem.gameImageList[this.currentIndex].url
        }
    }
}
</script>

<style lang="scss" scoped>
    .data-detail {
        .input-box {
            .btn {
                margin-left: 10px;
            }
        }
        .table-box {
            margin: 20px 0;

            .msg-box {
                > div {
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 3;
                    overflow: hidden;
                }
                .msg-icon {
                    width: 80px;
                    height: 80px;
                    margin: 0 auto;
                    > img {
                        width: 100%;
                        height: 100%;
                    }
                }
                .msg-title {
                    font-weight: 500;
                    color: #000000;
                    margin-right: 5px;
                }
            }

            .video-box {
                margin-bottom: 10px;
            }

            .img-box {
                position: relative;
                top: 0;
                left: 0;
                z-index: 1;
                width: 160px;
                height: 80px;
                margin-bottom: 10px;
                display: flex;
                align-items: center;
                justify-content: center;
                cursor: pointer;
                &:hover {
                    background-color: #ddd;
                }
                > img {
                    max-width: 100%;
                    max-height: 100%;
                }
                .px-box {
                    position: absolute;
                    font-size: 12px;
                    right: 5px;
                    bottom: 0;
                }
            }

            .watch-more {
                color: #409EFF;
                text-align: center;
                > span {
                    cursor: pointer;
                    &:hover {
                        opacity: .8;
                        text-decoration: underline;
                    }
                }
            }
        }

        .btn-box {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 20px;
        }

        .tools {
            padding-right: 20px;
            display: flex;
            justify-content: flex-end;
        }

        .video-list-box {
            .video-box {
                min-height: 324px;
                display: flex;
                flex-wrap: wrap;
                margin-top: 10px;
                .video-items {
                    padding: 5px;
                    padding-top: 10px;
                    max-height: 162px;
                    &:hover {
                        background-color: #eeeeee;
                    }
                    .video-title {
                        margin-top: 4px;
                        font-size: 12px;
                        overflow: hidden;
                        -webkit-line-clamp: 2;
                        -webkit-box-orient: vertical;
                        display: -webkit-box;
                        width: 160px;
                        height: 35px;
                        word-break: break-all;
                        .title-official {
                            color: #F56C6C;
                            margin-right: 5px;
                        }

                        .title-user {
                            color: #67C23A;
                            margin-right: 5px;
                        }
                    }
                    .video-btn {
                        display: flex;
                        justify-content: center;
                    }
                }
            }
            .dialog-tools {
                padding-right: 20px;
                display: flex;
                justify-content: flex-end;
            }
        }

        .img-list-box {
            /deep/  .el-dialog__body {
                padding: 0 20px 10px;
            }
            .dialog-img-box {
                min-height: 324px;
                display: flex;
                flex-wrap: wrap;
                .img-item {
                    padding: 5px;
                    padding-top: 10px;
                    .show-box {
                        width: 160px;
                        height: 160px;
                        border-radius: 6px;
                        overflow: hidden;
                        display: flex;
                        align-items: center;
                        > img {
                            width: 100%;
                            max-height: 100%;
                        }
                    }
                    &:hover {
                        background-color: #eeeeee;
                    }
                    .img-btn {
                        margin-top: 10px;
                        display: flex;
                        // align-items: center;
                        justify-content: center;
                    }
                }
            }
            .dialog-tools {
                padding-right: 20px;
                display: flex;
                justify-content: flex-end;
            }
        }

        .img-list-dialog {
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            z-index: 100;
            overflow: auto;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: rgba(0, 0, 0, .3);
            > img {
                max-width: 100%;
                max-height: 80vh;
            }
            .left, .right {
                position: absolute;
                top: 50%;
                z-index: 1;
                width: 50px;
                height: 50px;
                border-radius: 50%;
                background-color: #606266;
                transform: translateY(-50%);
                cursor: pointer;
                display: flex;
                align-items: center;
                justify-content: center;
                color: #ffffff;
                font-size: 24px;
                &:hover {
                    opacity: .8;
                }
            }

            .left {
                left: 50px;
            }

            .right {
                right: 50px;
            }
        }
    }
</style>
